<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    body {
        margin: 0;
    }

    header {
        height: 700px;
        background-image: url(bg.jpg);
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    button  {
        position: relative;
        top: 100px;
        width: 100px;
        height: 80px;
        background-color: transparent;
        color: #fff;
        font-size: 24px;
        border: 1px solid #fff;
        outline: none;
        border-radius: 10px;
        cursor: pointer;
    }

    button:hover {
        background-color: #fff;
        color: #45b2eb;
    }

    div {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    span {
          font-size: 64px;
          color: #e96d4f;
    }

    article {
          height: 600px;
          background-image: url(2.jpg);
          background-attachment: fixed;
    }

    main {
          height: 580px;
          position: relative;
    }

    main>img {
        position: absolute;
        bottom: 0;
        left: 180px
    }

    main>aside {
        width: 500px;
        position: absolute;
        top: 100px;
        right: 200px;
        text-align: right;
    }

    aside>h1 {
        font-size: 50px;
    }

    aside>p {
        font-size: 20px;
        color: #555;
    }

    aside>a {
        text-decoration: none;
    }
    map {
        display: block;
        width: 100%;
        height:700px;
    }
    </style>
</head>

      height :80px;
      background-color: transparent;
      color: #fff;
      font-size: 24px;
      border: 1px solid #fff;
      outline: none;
      }
      </style>


<body>
    <header>
        <button>启动自毁程序</button>
    </header>
    <div>
        <span>乐·在·沟·通</span>
    </div>
    <article></article>
    <main>
    <img src="7.png" alt="">
    <aside>
        <h1>沟通，是跨越千山万水的亲切声音</h1>
        <p>沟通，是跨越千山万水的亲切声音
无论何时何地，你都能自由享受QQ在各类终端
上带来的高清通话，与好友一起想聊多久聊多久</p>
        <p><a href="http://im.qq.com/">了解更多></a></p>

    </aside>
    </main>
    <map id="here"></map>
</body>
<script src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script>
function initMap() {
    var map = new BMap.Map("here");
    var point = new BMap.Point(108.946023, 34.331407
);
    map.centerAndZoom(point,19);
    window.map = map;
}
initMap();
</script>


</html>